﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dreamer Blog - 后台管理系统</title> 
    <!-- bootstrap 3.0.2 -->
    <link href="/resource/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- font Awesome -->
    <link href="/resource/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="/resource/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- Morris chart -->
    <link href="/resource/css/morris/morris.css" rel="stylesheet" type="text/css" />
    <!-- jvectormap -->
    <link href="/resource/css/jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" />
    <!-- iCheck for checkboxes and radio inputs -->
    <link href="/resource/css/iCheck/all.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="/resource/css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div class="row">
	    <div class="col-md-12">
	    	<h1 class="panel-heading">页面管理</h1>
	        <!--breadcrumbs start -->
	        <ul class="breadcrumb">
	            <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
	            <li><a href="#">Dashboard</a></li>
	            <li class="active">Current page</li>
	        </ul>
	        <!--breadcrumbs end -->
	    </div>
	</div>
	<div class="row">
		<div class="col-lg-12">
			<section class="panel">
				<div class="panel-body">
	                 <!-- <span class="pull-right badge badge-info">32</span> -->
	                 <button class="btn btn-primary btn-addon btn-sm"  th:onclick="'javascript: toAddPage()'">
	                     <i class="fa fa-plus"></i>添加页面
	                 </button>
	            </div>
			    <div class="panel-body table-responsive">
					<table class="table table-hover">
						<thead>
							<tr>
								<th style="width:50px;">选择</th>
								<th>编码</th>
								<th>页面名称</th>
								<th>页面路径</th>
								<th>模版</th>
								<th>发布时间</th>
								<th>发布状态</th>
								<th style="width:300px;">操作</th>
							</tr>
						</thead>
						<tbody>
							<tr th:each="page : ${pages.list}">
								<td><input type="checkbox" class="flat-grey list-child" th:value="${page.id}"/></td>
								<td th:text="${page.code}"></td>
								<td><a href="#" th:text="${page.pageName}">关于我们</a></td>
								<td th:text="${page.pageUrl}">/about</td>
								<td th:text="${page.pageTemp}">/aboutus.jsp</td>
								<td th:text="${#dates.format(page.createTime, 'yyyy-MM-dd')}">2018-08-13</td>
								<td><span th:text="${page.status}=='1'?'显示':'隐藏'" th:class="${page.status}=='1'?'label label-success':'label label-danger'">否</span></td>
								<td>
									<a href="/admin/category/toAdd/categoryid1" class="btn btn-xs btn-warning">预览</a>
									<span>&nbsp;|&nbsp;</span>
									<a th:href="@{/admin/pages/toEdit(id=${page.id})}" class="btn btn-xs btn-success">编辑</a>
									<span>&nbsp;|&nbsp;</span>
									<a href="javascript:void(0)" data-toggle="modal" class="btn btn-xs btn-danger" th:onclick="'javascript: confrimRemove(\''+${page.id}+'\')'">删除</a>
								</td>
							</tr>
							<tr th:if="${#lists.isEmpty(pages.list)}">
								<td colspan="8" align="center">无数据</td>
							</tr>
						</tbody>
					</table>
			    </div>
			    <div class="panel-footer bg-white text-right">
                     <ul class="pagination">
                         <li><a th:href="@{/admin/pages/list(pageNum=${pages.navigateFirstPage},pageSize=${pages.pageSize})}" title="首页" th:class="${pages.isFirstPage} ? 'paginationNotAllowed' : ''">«</a></li>
                         <li><a th:href="@{/admin/pages/list(pageNum=${pages.prePage},pageSize=${pages.pageSize})}" title="上一页" th:if="${pages.hasPreviousPage}">‹</a></li>
                         <li th:each="pageinfo : ${pages.navigatepageNums}"><a th:href="@{/admin/pages/list(pageNum=${pageinfo},pageSize=${pages.pageSize})}" th:class="${pageinfo == pages.pageNum} ? 'paginationActive' : ''" th:text="${pageinfo}"></a></li>
                         <li><a th:href="@{/admin/pages/list(pageNum=${pages.nextPage},pageSize=${pages.pageSize})}" title="下一页" th:if="${pages.hasNextPage}">›</a></li>
                         <li><a th:href="@{/admin/pages/list(pageNum=${pages.navigateLastPage},pageSize=${pages.pageSize})}" title="未页" th:class="${pages.isLastPage} ? 'paginationNotAllowed' : ''">»</a></li>
                     </ul>
                </div>
			</section>
		</div>
	</div>
	<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="remove-dialog" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                        <h4 class="modal-title">操作提示？</h4>
                    </div>
                    <div class="modal-body">
						<h4 class="modal-title">您确定要删除该记录吗？</h4>
						<input type="hidden" id="cacheID" />
                    </div>
                    <div class="modal-footer">
                    	<button type="button" class="btn btn-primary btn-addon btn-sm" onclick="remove();">确定</button>
                    	<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
	<!-- jQuery 2.0.2 -->
	<script src="/resource/js/jquery.min.js" type="text/javascript"></script>
	<!-- jQuery UI 1.10.3 -->
	<script src="/resource/js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
	<!-- Bootstrap -->
	<script src="/resource/js/bootstrap.min.js" type="text/javascript"></script>
	<!-- iCheck -->
    <script src="/resource/js/plugins/iCheck/icheck.min.js" type="text/javascript"></script>
	<!-- Director App -->
	<script src="/resource/js/Director/app.js" type="text/javascript"></script>
	<script src="/resource/js/jquery.serializejson.js"></script>
	<script type="text/javascript">
		window.onload = function(){
			renderCheckBox();
		}
		
		function renderCheckBox(){
			$('input').on('ifChecked', function(event) {
			    $(this).parents('li').addClass("task-done");
			    console.log('ok');
			});
			$('input').on('ifUnchecked', function(event) {
			    $(this).parents('li').removeClass("task-done");
			    console.log('not');
			});
			
			$('input[type="checkbox"].flat-grey, input[type="radio"].flat-grey').iCheck({
			    checkboxClass: 'icheckbox_flat-grey',
			    radioClass: 'iradio_flat-grey'
			});
		}
		
		function toAddPage(){
			window.location.href = "/admin/pages/toAdd?t="+new Date().getTime();	
		}
		
		function confrimRemove(id){
			$("#remove-dialog").modal();
			$("#cacheID").val(id);
		}
		
		function remove(){
			var currentID = $("#cacheID").val();
			window.location.href="/admin/pages/delete?id="+currentID;
			$("#remove-dialog").modal('hide');
		}
	</script>
</body>
</html>
